<!--Start Breadcrumb-->
<div class="row">
    <div id="breadcrumb" class="col-xs-12">

    </div>
</div>
<!--End Breadcrumb-->
<!--Start Dashboard 2-->

<div class="row-fluid">


    <div id="dashboard_tabs" class="col-xs-12 col-sm-10">
        <form id="natural" method="post" data-target="flujo/RegistroNatural" action="#solicitud" class="form">
            <!--Start datos Tab 1-->
            <div id="dashboard-overview" class="row" style="visibility: visible; position: relative;">
                <div class="box">
                    <div class="box-content">
                        <div class="text-left">
                            <h4 class="page-header">Registro de Institucion</h4>
                        </div>
                        <div class="row ">
                            <div class="col-sm-8">

                                <label class="col-xs-4 control-label form-group" for="strnombre">Nombre de La Institucion</label>

                                <div class="col-xs-4 form-group">
                                    <input type="text" class="form-control" id="strnombre" name="strnombre" placeholder="Ejem: INSOPESCA" data-toggle="tooltip" title="Nombre de la institucion" >
                                </div>
                                <div class="col-xs-4 form-group">
                                    <select class="select" id="tipo" name="tipo">
                                        <option value="">...</option>
                                        <option value="Privada">Privada</option>
                                        <option value="Publica">Publica</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-2 form-group">
                                <button id="guardar" type="button">
                                    <img src="../includes/img/lupa.png"  height="25" width="25"> 
                                </button>  
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-sm-3"></div>
                            <div class="col-xs-12 col-sm-6">
                                <div class="box">
                                    <div class="box-header">
                                        <div class="box-name">
                                            <i class="fa fa-table"></i>
                                            <span>Instituciones</span>
                                        </div>
                                        <div class="box-icons">
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="expand-link">
                                                <i class="fa fa-expand"></i>
                                            </a>

                                        </div>
                                        <div class="no-move"></div>
                                    </div>
                                    <div class="box-content">

                                        <table class="table">
                                            <thead>
                                                <tr>

                                                    <th>Nombre</th>
                                                    <th>Tipo</th>
                                                    <th>Modificacion</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tb">
                                                <tr>

                                                    <td>INSOPESCA</td>
                                                    <td>PUBLICA</td>
                                                    <td>0</td>
                                                </tr>
                                                <tr>

                                                    <td>PDVAL</td>
                                                    <td>PUBLICA</td>
                                                    <td>1</td>
                                                </tr>
                                                <tr>

                                                    <td>MERCAL</td>
                                                    <td>PUBLICA</td>
                                                    <td>1</td>
                                                </tr>
                                                <tr>

                                                    <td>UNICASA</td>
                                                    <td>PRIVADA</td>
                                                    <td>2</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <!--End datos Tab 1-->


        </form>
    </div>

    <div class="clearfix"></div>
    
</div>
<div id="myModel" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-triangle"></i>
                        <strong></strong> 
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                    </div>
                </div> 
            </div>
        </div>
    </div>
<!--End Dashboard 2 -->

<script type="text/javascript">

// Run Select2 on element
    function tabla() {
     
        $.ajax({
            type: "post",
            url: "../get/tabla",
            dataType: "json",
            data: {tabla: 1},
            success: function(data) {
                if (data['success']){
                    $('#tb').html('');
                        $.each( data['dato'], function( key, value ) {
                           $('#tb').append('<tr><td>'+value['strnombre']+'</td><td>'+value['strtipo']+'</td><td>0</td></tr>');
                           
                             });
                         
               
                }else {
                       jError('ERROR : '+data['mensaje'], {
                         VerticalPosition : 'center',
                         HorizontalPosition : 'center'
                     });
                    }
   
            }
        });


    }
    $(document).ready(function() {
        // Load script of Select2 and run this
        LoadSelect2Script(Select2Test);

        tabla();
        $('.form-control').tooltip();
      
        $("#tipo").select2();
        //listar estados
        $('#guardar').on('click', function() {
            if($('#strnombre').val()==''){
                     jError('ERROR : Campo no puede estar vacio', {
                         VerticalPosition : 'center',
                         HorizontalPosition : 'center'
                     });
                    }else if($('#tipo').val()==''){
                        jError('ERROR : Debe Seleccionar el tipo de Empresa', {
                         VerticalPosition : 'center',
                         HorizontalPosition : 'center'
                     }); 
                    }else{
            $.ajax({
                type: "post",
                url: "../get/guardar",
                dataType: "json",
                data: {strnombre: $("#strnombre").val(), tipo: $('#tipo').val()},
                success: function(data) {
                    tabla();
                    $('#strnombre').val('');
                    $("#tipo").select2("val", "");
                   
                }
            });

}
        });

        // Load script of Select2 and run this
        DashboardTabChecker();
        WinMove();
    });
</script>
